<template>
  <div
    ref="screen"
    v-loading="dashboardLoading"
    :class="['dashboard', isFullScreen ? 'full-screen' : 'not-full-screen']"
  >
    <div ref="dashboard" class="dashboard-screen" :style="dashboardStyle">
      <div class="dashboard-content" :style="dashboardChildrenStyle">
        <div class="title">
          <span class="title-day">{{
            new Date() | parseTime(`{y}/{m}/{d}  &nbsp;星期{a}`)
          }}</span>
          <div class="title-name">星云信贷数据驾驶舱</div>

          <div class="title-switch">
            <el-select
              v-model="sources"
              :popper-append-to-body="false"
              placeholder="请选择"
              @change="changeDashboardType"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <guide-data :data="getData.main"></guide-data>
        <dash-map :data="getData.map"></dash-map>
        <div class="col">
          <top-left class="mt106" :data="getData.today"></top-left>
          <bottom-left class="mt28" :data="getData.distribute"></bottom-left>
        </div>
        <div class="col">
          <top-right class="mt106"></top-right>
          <bottom-right class="mt28" :data="getData.feed"></bottom-right>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
// 具体用法查看官方API:https://github.com/kaorun343/vue-property-decorator
import { Component, Vue, Watch, Prop } from 'vue-property-decorator'
import { SettingsModule } from '@/store/modules/settings'
import { AppModule } from '@/store/modules/app'
import { debounce } from 'lodash'
import topLeft from './topLeft/index.vue'
import bottomLeft from './bottomLeft/index.vue'
import topRight from './topRight/index.vue'
import bottomRight from './bottomRight/index.vue'
import guideData from './guideData/index.vue'
import dashMap from './map/index.vue'
import { setTimeout } from 'timers'
import { dashboard } from '@/api/risksystem/dashboardHome/index'
import { adjustScreen } from '@/utils/index'
const defaultData = {
  main: {
    signup_uv: 0, // 累计注册人数
    credit_venture_quota: 0, // 累计授信金额
    credit_venture_pass_pv: 0, // 累计授信人次
    credit_venture_pass_uv: 0, // 累计授信人数
    loan_success_amount: 0, // 累计放款金额
    loan_success_pv: 0, // 累计放款人次
    loan_success_uv: 0, // 累计放款人数
    paid_principal: 0, // 累计已还本金
    loan_repay_uv: 0, // 在贷人数
    month_signup_uv: 0 // 当月注册人数
  },
  today: {
    // 今日数据
    credit_venture_submit_uv: 0, // 申请人数
    credit_venture_pass_uv: 0, // 授信人数
    loan_success_uv: 0, // 放款人数
    first_loan_success_uv: 0, // 首贷用户
    credit_venture_quota: 0, // 授信金额
    loan_success_amount: 0, // 放款金额
    first_loan_success_amount: 0 // 首贷金额
  },
  distribute: {
    // 数据分布
    loan_age: {
      // 年龄分布
      '0': 0,
      '30': 0,
      '40': 0,
      '50': 0
    },
    loan_amount: {
      // 借款金额分布
      '0': 0,
      '1': 0,
      '3': 0,
      '5': 0,
      '10': 0
    },
    loan_day_rate: {
      // 利率分布
      '0': 0,
      '2': 0,
      '3': 0,
      '4': 0,
      '5': 0
    }
  },
  map: [],
  feed: []
}
@Component({
  name: 'dashboard',
  components: {
    //引用的组件在这里声明
    topLeft,
    bottomLeft,
    topRight,
    bottomRight,
    guideData,
    dashMap
  }
})
export default class extends Vue {
  @Prop({ default: '' }) private propExp1!: string
  // @Prop({ required: true }) private propExp2?: boolean
  private dataExp: any = ''
  private clientHeight: number | string = ''
  private dashboardStyle = {}
  private dashboardChildrenStyle = {}
  private timer1: any
  private data = defaultData
  private dashboardLoading = false
  private sources = '360'
  private options = [
    {
      value: '360',
      label: '360'
    },
    {
      value: 'mybank',
      label: '网商'
    }
  ]
  get getData() {
    //computed 属性
    return this.data
  }
  get isFullScreen() {
    return SettingsModule.isFullScreen
  }
  get sidebarOpen() {
    return AppModule.sidebar.opened
  }
  get dashboardType() {
    return SettingsModule.dashboardType
  }
  @Watch('sidebarOpen')
  private onsidebarOpenChange(value: any) {
    // 一定要等页面变化transition之后才开始trigger，sidebar transition时间为300ms 详情见layout/index.vue line-146
    setTimeout(() => {
      console.log('change 宽度变为：' + (this.$refs.screen as any).offsetWidth)
      var myEvent = new Event('resize')
      window.dispatchEvent(myEvent)
    }, 300)
  }
  @Watch('dashboardType')
  private ondashboardTypeChange(value: any) {
    // 一定要等页面变化transition之后才开始trigger，sidebar transition时间为300ms 详情见layout/index.vue line-146
    // this.getDashboardData()
    window.clearInterval(this.timer1)
    this.timer1 = setInterval(() => {
      // this.getDashboardDataNoLoading()
    }, 60000)
  }
  created() {
    // 最早可以调用vue组件method的钩子
  }
  mounted() {
    this.init()
    // this.getDashboardData()
    this.timer1 = setInterval(() => {
      // this.getDashboardDataNoLoading()
    }, 60000)
  }
  private init() {
    //自适应，以屏幕宽度为app的宽度，自动调整dashboard高宽度

    //mounted 钩子
    this.dashboardStyle = {
      width: `0px`,
      height: `0px`
    }
    this.$nextTick(() => {
      let tempStyle = adjustScreen(
        (this.$refs.screen as any).offsetWidth,
        (this.$refs.screen as any).offsetHeight
      )
      this.dashboardStyle = tempStyle.dashboardStyle
      this.dashboardChildrenStyle = tempStyle.dashboardChildrenStyle
    })
    window.onresize = debounce(() => {
      this.dashboardStyle = {
        width: `0px`,
        height: `0px`
      }
      this.$nextTick(() => {
        let tempStyle = adjustScreen(
          (this.$refs.screen as any).offsetWidth,
          (this.$refs.screen as any).offsetHeight
        )
        this.dashboardStyle = tempStyle.dashboardStyle
        this.dashboardChildrenStyle = tempStyle.dashboardChildrenStyle
      })
    }, 10)
  }
  beforeDestroy() {
    // 摧毁监听事件
    window.onresize = null
    clearInterval(this.timer1)
  }
  private methodExp() {
    // method创建地方
  }
  // private async getDashboardDataNoLoading() {
  //   try {
  //     const { data } = await dashboard({
  //       channel: this.dashboardType
  //     })
  //     Object.assign(this.data, data)
  //   } catch (error) {
  //     console.error(error)
  //   }
  // }
  // private async getDashboardData() {
  //   try {
  //     this.dashboardLoading = true
  //     const { data } = await dashboard({
  //       channel: this.dashboardType
  //     })
  //     Object.assign(this.data, data)
  //   } catch (error) {
  //     console.error(error)
  //   } finally {
  //     this.dashboardLoading = false
  //   }
  // }
  private changeDashboardType(val: any) {
    console.log(val)
    SettingsModule.ChangeSetting({
      key: 'dashboardType',
      value: val
    })
  }
}
</script>

<style lang="scss" scoped>
@font-face {
  font-family: 'FZHei-B01S';
  src: url('../../../assets/fonts/FZHei-B01S.TTF');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'DFPZongYiW7-GB';
  src: url('../../../assets/fonts/DFPZongYiW7-GB.TTF');
  font-weight: normal;
  font-style: normal;
}
.dashboard {
  background: $bgBlack;
  min-height: inherit;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .dashboard-screen {
    width: 1404px;
    height: 100%;
    background: url('./../../../assets/dashboard/bg.png') no-repeat center;
    background-size: cover;
    position: relative;
    .dashboard-content {
      height: 1080px;
      width: 1920px;
      font-size: 100px;
      display: flex;
      justify-content: space-between;
      padding: 0 0.45em;
      .title {
        /* em
          子元素字体大小的em是相对于父元素字体大小
          元素的width/height/padding/margin用em的话是相对于该元素的font-size */
        height: 1.26em;
        background: url('./../../../assets/dashboard/header-bg.png') no-repeat
          center;
        background-size: cover;
        display: flex;
        justify-content: center;
        position: absolute;
        width: 100%;
        top: 0;
        left: 0;
        .title-name {
          height: 1em;
          font-size: 0.4em;
          font-family: FZHei-B01S;
          font-weight: bold;
          color: transparent;
          margin-top: 0.4em;
          background: linear-gradient(
            90deg,
            #d1f8fe 0%,
            #ffffff 25%,
            #ccd5fa 75%,
            #d1f8fe 100%
          );
          animation: bg-color 5s infinite alternate;
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
        .title-day {
          position: absolute;
          // right: 6.05em;
          left: 2.05em;
          color: #cee2fe;
          font-size: 0.24em;
          top: 0.96em;
        }
        .title-switch {
          position: absolute;
          // right: 6.05em;
          right: 3.05em;
          color: #cee2fe;
          font-size: 0.24em;
          top: 0.8em;
          z-index: 2002;
          ::v-deep .el-input__inner {
            color: #cee2fe;
            background: url('./../../../assets/dashboard/border.png') no-repeat
              center;
            border: none;
            width: 13em;
            padding: 0 1em;
            * {
              font-size: 0.24em;
            }
          }
          ::v-deep .el-input__suffix {
            right: 10px;
          }
          ::v-deep .el-select-dropdown {
            border: 1px solid #1a3d7f !important;
            background-color: #0e1228 !important;
            width: 7.4em;
          }
          ::v-deep .el-select-dropdown__item {
            color: #fff;
          }
          ::v-deep .el-select-dropdown__item.hover,
          ::v-deep .el-select-dropdown__item:hover {
            background-color: #3a5682;
          }
          ::v-deep .el-select-dropdown__item.selected {
            color: #1890ff;
            font-weight: 700;
          }
          ::v-deep .popper__arrow {
            border-bottom-color: #1a3d7f !important;
          }
          ::v-deep .popper__arrow::after {
            border-bottom-color: #1a3d7f !important;
          }
        }
      }
      .col {
        width: 4.08em;
        z-index: 2000;
        .mt106 {
          margin-top: 1.06em;
        }
        .mt28 {
          margin-top: 0.28em;
        }
      }
    }
  }
}
.full-screen {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 1002;
}
</style>
